import { FormSchema, FormProps } from '/@/components/Form';
import { state } from '/@/enums/dateTypeEnum';
import { getBarndListApi, getDeviceTypeListApi } from '/@/api/sys/gateway/gateway';
import { alleqtClass } from '/@/api/sys/brand/brand';
import type { DynamicProps } from '/#/utils';
type Props = Partial<DynamicProps<FormProps>>;

export const searchSchemas: FormSchema[] = [
  {
    field: 'name',
    component: 'Input',
    label: '名称',
    labelWidth: 60,
    componentProps: {
      placeholder: '请输入设备名称',
    },
    colProps: {
      lg: 6,
      xl: 4,
      xxl: 4,
    },
  },
  {
    field: 'brand_id',
    component: 'ApiSelect',
    label: '品牌商',
    labelWidth: 60,
    componentProps: ({ formModel, formActionType }) => {
      return {
        api: getBarndListApi,
        labelField: 'name',
        valueField: 'id',
        onChange: async (value: any) => {
          const { updateSchema } = formActionType;
          formModel.device_type_id = undefined; //  reset
          const dt_list: any = await getDeviceTypeListApi({ brand_id: value });
          updateSchema({
            field: 'device_type_id',
            componentProps: {
              options: dt_list.list.map((item) => {
                const obj = {
                  label: item.name,
                  value: item.id,
                };
                return obj;
              }),
            },
          });
        },
      };
    },
    colProps: {
      lg: 6,
      xl: 4,
      xxl: 4,
    },
  },

  {
    field: 'device_type_id',
    component: 'Select',
    label: '型号',
    labelWidth: 60,
    componentProps: {
      placeholder: '请输入型号',
    },
    colProps: {
      lg: 6,
      xl: 4,
      xxl: 4,
    },
  },

  {
    field: 'category_id',
    component: 'ApiSelect',
    label: '设备分类',
    labelWidth: 100,
    componentProps: () => {
      return {
        api: alleqtClass,
        labelField: 'name',
        valueField: 'id',
        resultField: 'list',
      };
    },
    colProps: {
      lg: 6,
      xl: 4,
      xxl: 4,
    },
  },
  {
    field: 'code',
    component: 'Input',
    labelWidth: 60,
    label: '编码',
    componentProps: {
      placeholder: '请输入编码',
    },
    colProps: {
      lg: 6,
      xl: 4,
      xxl: 4,
    },
  },
  {
    field: 'tag_name',
    component: 'Input',
    labelWidth: 90,
    label: '标签名称',
    componentProps: {
      placeholder: '请输入标签名称',
    },
    colProps: {
      lg: 6,
      xl: 4,
      xxl: 4,
    },
  },
  {
    field: 'device_status',
    component: 'Select',
    label: '状态',
    labelWidth: 60,
    componentProps: {
      placeholder: '请选择',
      options: state,
    },
    colProps: {
      lg: 6,
      xl: 4,
      xxl: 4,
    },
  },
];

export const serchConfig: Props = {
  schemas: searchSchemas,
};
